{% extends 'base.html' %}

{% block js %}
    <script src="{{ url_for('static', filename='d3_cloud/d3.v3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='d3_cloud/d3.layout.cloud.js') }}"></script>
    <script type="text/javascript">
        $(function () {
            var fill = d3.scale.category20();
            var words_array = JSON.parse('{{ cloud_words_json|safe }}');
            var layout = d3.layout.cloud()
                    .size([800, 600])
                    .words(words_array)
                    .padding(5)
                    .rotate(function () {
                        return (~~(Math.random() * 6) - 3) * 30;
                    })
                    .font("Impact")
                    .fontSize(function (d) {
                        return d.size;
                    })
                    .spiral('archimedean')
                    .on("end", draw);

            layout.start();

            function draw(words) {
                $('#tag-cloud').empty();
                d3.select("#tag-cloud").append("svg")
                        .attr("width", layout.size()[0])
                        .attr("height", layout.size()[1])
                        .append("g")
                        .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
                        .selectAll("text")
                        .data(words)
                        .enter().append("text")
                        .style("font-size", function (d) {
                            return d.size + "px";
                        })
                        .style("font-family", "Impact")
                        .style("fill", function (d, i) {
                            return fill(i);
                        })
                        .attr("text-anchor", "middle")
                        .attr("transform", function (d) {
                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                        })
                        .text(function (d) {
                            return d.text;
                        });

            }

            $('#submit-cloud').click(function () {
                layout.start();
            });
        });

    </script>
{% endblock %}

{% block right %}
    <div class="col-md-12 page-body">
        <div class="row">
            <div class="sub-title">
                <h2>标签云</h2>
                <a href="{{ url_for('main.index') }}" title="首页" class=""><i class="icon-home"></i></a>
            </div>
            <div class="col-md-12 content-page">
                <div id="tag-cloud">
                </div>
                <div class="col-md-12 text-center">
                    <a href="javascript:void(0)" id="submit-cloud" class="load-more-button">Change</a>
                </div>
            </div>
        </div>
    </div>
    {{ super() }}
{% endblock %}